import React, { useState } from 'react';
import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Image, } from 'react-native';
import { Picker } from '@react-native-picker/picker';
import { useRouter } from 'expo-router';
const Nearby = () => {
  const [selectedRegion, setSelectedRegion] = useState('全部');
  const [selectedType, setSelectedType] = useState('全部');
  const [selectedPrice, setSelectedPrice] = useState('全部');
  const [selectedQuality, setSelectedQuality] = useState('全部');
  const [selectedSource, setSelectedSource] = useState('全部');
  const router = useRouter();
  const handleFilterChange = (type, value) => {
    switch (type) {
      case 'region':
        setSelectedRegion(value);
        break;
      case 'type':
        setSelectedType(value);
        break;
      case 'price':
        setSelectedPrice(value);
        break;
      case 'quality':
        setSelectedQuality(value);
        break;
      case 'source':
        setSelectedSource(value);
        break;
      default:
        break;
    }
  };

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <TouchableOpacity onPress={() => console.log('Back button pressed')}>
          <Text onPress={()=>router.back()} >返回</Text>
        </TouchableOpacity>
        <Picker
          selectedValue={selectedRegion}
          onValueChange={(value) => handleFilterChange('region', value)}
          style={styles.filterButton}
        >
          <Picker.Item label="地区" value="全部" />
          <Picker.Item label="北京" value="北京" />
          <Picker.Item label="上海" value="上海" />
        </Picker>
        <Picker
          selectedValue={selectedType}
          onValueChange={(value) => handleFilterChange('type', value)}
          style={styles.filterButton}
        >
          <Picker.Item label="种类" value="全部" />
          <Picker.Item label="猫" value="猫" />
          <Picker.Item label="狗" value="狗" />
        </Picker>
        <Picker
          selectedValue={selectedPrice}
          onValueChange={(value) => handleFilterChange('price', value)}
          style={styles.filterButton}
        >
          <Picker.Item label="价格" value="全部" />
          <Picker.Item label="低" value="低" />
          <Picker.Item label="中" value="中" />
          <Picker.Item label="高" value="高" />
        </Picker>
        <Picker
          selectedValue={selectedQuality}
          onValueChange={(value) => handleFilterChange('quality', value)}
          style={styles.filterButton}
        >
          <Picker.Item label="品级" value="全部" />
          <Picker.Item label="普通" value="普通" />
          <Picker.Item label="精品" value="精品" />
        </Picker>
        <Picker
          selectedValue={selectedSource}
          onValueChange={(value) => handleFilterChange('source', value)}
          style={styles.filterButton}
        >
          <Picker.Item label="来源" value="全部" />
          <Picker.Item label="个人" value="个人" />
          <Picker.Item label="商家" value="商家" />
        </Picker>
      </View>

      <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
        <View style={styles.petContainer}>
          {/* Pet Cards */}
          <TouchableOpacity style={styles.petCard}>
            <Image source={{ uri: 'https://example.com/image1.jpg' }} style={styles.petImage} />
            <View style={styles.petDetails}>
              <Text style={styles.petName}>法国斗牛犬</Text>
              <Text style={styles.petPrice}>¥ 2555</Text>
              <Text style={styles.petLocation}>北京 朝阳</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity style={styles.petCard}>
            <Image source={{ uri: 'https://example.com/image2.jpg' }} style={styles.petImage} />
            <View style={styles.petDetails}>
              <Text style={styles.petName}>缅因猫</Text>
              <Text style={styles.petPrice}>¥ 1399</Text>
              <Text style={styles.petLocation}>江苏 盐城</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity style={styles.petCard}>
            <Image source={{ uri: 'https://example.com/image3.jpg' }} style={styles.petImage} />
            <View style={styles.petDetails}>
              <Text style={styles.petName}>缅因猫</Text>
              <Text style={styles.petPrice}>¥ 999</Text>
              <Text style={styles.petLocation}>江苏 盐城</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity style={styles.petCard}>
            <Image source={{ uri: 'https://example.com/image4.jpg' }} style={styles.petImage} />
            <View style={styles.petDetails}>
              <Text style={styles.petName}>缅因猫</Text>
              <Text style={styles.petPrice}>¥ 1599</Text>
              <Text style={styles.petLocation}>江苏 盐城</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity style={styles.petCard}>
            <Image source={{ uri: 'https://example.com/image5.jpg' }} style={styles.petImage} />
            <View style={styles.petDetails}>
              <Text style={styles.petName}>缅因猫</Text>
              <Text style={styles.petPrice}>¥ 1899</Text>
              <Text style={styles.petLocation}>江苏 盐城</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity style={styles.petCard}>
            <Image source={{ uri: 'https://example.com/image6.jpg' }} style={styles.petImage} />
            <View style={styles.petDetails}>
              <Text style={styles.petName}>边境牧羊犬</Text>
              <Text style={styles.petPrice}>¥ 2000</Text>
              <Text style={styles.petLocation}>江苏 南京</Text>
            </View>
          </TouchableOpacity>
        </View>
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    padding: 10,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 10,
  },
  filterButton: {
    padding: 5,
    marginHorizontal: 5,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 5,
  },
  petContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  petCard: {
    width: '48%',
    marginBottom: 10,
    borderRadius: 5,
    overflow: 'hidden',
  },
  petImage: {
    width: '100%',
    height: 200,
  },
  petDetails: {
    padding: 10,
  },
  petName: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  petPrice: {
    color: 'red',
    fontSize: 14,
  },
  petLocation: {
    fontSize: 12,
    color: '#666',
  },
});

export default Nearby;